<template>
  <view class="page-content">
    <view>
      <u-tabs-swiper
        active-color="#000000"
        inactive-color="#999999"
        :bar-style="{ background: '#FCD610' }"
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs-swiper>
    </view>
    <view class="search-box">
      <custom-input
        placeholder="搜索"
        background="#FFFFFF"
        :text="filterParmas.searchValue"
        @handleSearch="handleSearch"
      ></custom-input>
    </view>
    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-y
          style="flex: 1; overflow-y: auto"
          @scrolltolower="onreachBottom"
          :refresher-enabled="true"
          @refresherrefresh="handlerefresh"
          :refresher-triggered="showrefresh"
          :show-scrollbar="false"
        >
          <template v-if="dataList.length === 0 && status === 'nomore'">
            <empty></empty>
          </template>
          <template v-else>
            <block v-for="(item, index) in dataList" :key="index">
              <block v-for="(card, cindex) in item.data">
                <view class="cards">
                  <view class="card" :key="cindex">
                    <block v-if="item.type == 1"
                      ><plan-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 2"
                      ><car-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 3"
                      ><driver-plan-card :data="card"
                    /></block>

                    <block v-else-if="item.type == 4">
                      <bls-card :lists="[card]"></bls-card
                    ></block>
                    <block v-else-if="item.type == 5">
                      <blxq-card :lists="[card]"></blxq-card
                    ></block>
                    <block v-else-if="item.type == 6">
                      <ly-card :lists="[card]"></ly-card
                    ></block>
                    <block v-else-if="item.type == 7">
                      <doctor-card :lists="[card]"></doctor-card
                    ></block>
                    <block v-else-if="item.type == 8">
                      <jy-card :lists="[card]"></jy-card
                    ></block>
                    <block v-else-if="item.type == 9">
                      <pd-card :lists="[card]"></pd-card
                    ></block>
                    <block v-else-if="item.type == 10">
                      <mr-card :lists="[card]"></mr-card
                    ></block>
                    <block v-else-if="item.type == 11"
                      ><checked-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 12">
                      <teacher-card :data="card"></teacher-card>
                    </block>
                    <block v-else-if="item.type == 13"
                      ><detective-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 14"
                      ><bounty-offered-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 15"
                      ><bag-loss-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 16"
                      ><baomu-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 17"
                      ><party-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 18"
                      ><bzs-card :data="card"
                    /></block>
                  </view>
                  <view class="status">
                    <status :item="card" :type="item.type"></status>
                  </view>
                  <view class="btn-group flex-row justify-between mt-12">
                    <view class="tag"> <card-type :type="item.type" /> </view>
                    <view class="btns flex-row" style="gap: 10rpx">
                      <view class="btn" @click="handleDel(item.type, card.id)">
                        删除
                      </view>
                      <!-- <view class="btn"> 修改 </view> -->
                    </view>
                  </view>
                </view>
              </block>
            </block>
            <u-loadmore :status="status" />
          </template>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <scroll-view
          scroll-y
          style="flex: 1; overflow-y: auto"
          @scrolltolower="onreachBottom"
          :refresher-enabled="true"
          @refresherrefresh="handlerefresh"
          :refresher-triggered="showrefresh"
          :show-scrollbar="false"
        >
          <template v-if="dataList.length === 0 && status === 'nomore'">
            <empty></empty>
          </template>
          <template v-else>
            <block v-for="(item, index) in dataList" :key="index">
              <block v-for="(card, cindex) in item.data">
                <view class="cards">
                  <view class="card" :key="cindex">
                    <block v-if="item.type == 1"
                      ><plan-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 2"
                      ><car-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 3"
                      ><driver-plan-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 4">
                      <bls-card :lists="card"></bls-card
                    ></block>
                    <block v-else-if="item.type == 5">
                      <blxq-card :lists="card"></blxq-card
                    ></block>
                    <block v-else-if="item.type == 6">
                      <ly-card :lists="card"></ly-card
                    ></block>
                    <block v-else-if="item.type == 7">
                      <doctor-card :lists="card"></doctor-card
                    ></block>
                    <block v-else-if="item.type == 8">
                      <jy-card :lists="card"></jy-card
                    ></block>
                    <block v-else-if="item.type == 9">
                      <pd-card :lists="card"></pd-card
                    ></block>
                    <block v-else-if="item.type == 10">
                      <mr-card :lists="card"></mr-card
                    ></block>
                    <block v-else-if="item.type == 11"
                      ><checked-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 12"
                      ><teacher-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 13"
                      ><detective-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 14"
                      ><bounty-offered-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 15"
                      ><bag-loss-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 16"
                      ><baomu-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 17"
                      ><party-card :data="card"
                    /></block>
                    <block v-else-if="item.type == 18"
                      ><bzs-card :data="card"
                    /></block>
                  </view>
                  <view class="status">
                    <status :item="card" :type="item.type"></status>
                  </view>
                  <view class="btn-group flex-row justify-between mt-12">
                    <view class="tag"> <card-type :type="item.type" /> </view>
                    <view class="btns flex-row" style="gap: 10rpx">
                      <view class="btn" @click="handleDel(item.type, card.id)">
                        删除
                      </view>
                      <!-- <view class="btn"> 修改 </view> -->
                    </view>
                  </view>
                </view>
              </block>
            </block>
            <u-loadmore :status="status" />
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
// 1宠物计划 2附件车辆 3司机计划 4帮溜师 5帮溜需求 6 宠物领用/出售 7宠物医生 8 宠物寄养 9宠物配对 10宠物美容/写真 11宠物托运 12宠物学校13宠物寻丢师 14宠物挂失悬赏 15宠物报丢16宠物保姆 17宠物派对 18宠物殡葬
import blsCard from 'components/index/cwbl/bls-card.vue' //帮遛师
import blxqCard from 'components/index/cwbl/blxq-card.vue' //帮遛需求
import lyCard from 'components/common/card/ly-card.vue' //领养、出售
import doctorCard from 'components/index/cw-doctor/doctor-card.vue' //宠物医生
import jyCard from 'components/common/card/jy-card.vue' //寄养
import pdCard from 'components/common/card/pd-card.vue' //配对
import mrCard from 'components/common/card/mr-card.vue' //美容、写真
import customInput from 'components/common/custom-input.vue'
import carCard from 'components/common/card/car-card.vue' //附近车辆
import planCard from 'components/common/card/plan-class-card.vue' //宠物计划
import driverPlanCard from 'components/common/card/driver-plan-card.vue' //司机计划
import partyCard from 'components/common/card/pet-party/components/party-card.vue' //宠物派对
import detectiveCard from 'components/common/card/report-loss/components/pet-detective-card.vue' //宠物侦探
import bountyOfferedCard from 'components/common/card/report-loss/components/bounty-offered-card.vue' //悬赏
import bagLossCard from 'components/common/card/report-loss/components/bag-loss-card.vue' //挂丢
import teacherCard from '../../../../pages/index/pet-school/components/teacher-card.vue' //训宠师
import baomuCard from '../../../../pages/index/pet-baomu/components/baomu-card.vue' //保姆
import bzsCard from 'components/index/cmbz/bzs-card.vue' //殡葬师
import checkedCard from 'components/common/card/checked-card.vue'
import status from './components/status.vue'
import cardType from './components/card-type.vue'
import mine from '../../../../api/mine'
import utils from '../../../../utils/util.js'
import petBaomu from '../../../../api/petBaomu'
import petBasi from '../../../../api/petBasi'
import petChecked from '../../../../api/petChecked'
import petSchool from '../../../../api/petSchool'
import reportLoss from '../../../../api/reportLoss'
import petParty from '../../../../api/petParty'
import petFuneral from '../../../../api/petFuneral'
import {
  delDemandById,
  delSlipById,
  delAdoptById,
  deldoctorById,
  delpairById,
  delboardingHomeById,
  delbeauticianById,
} from '@/api/cwbl.js'
export default {
  data() {
    return {
      list: [
        {
          name: '我的发布',
        },
        {
          name: '我的申请',
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      status: 'loadmore',
      dataList: [{}], //数据列表
      filterParmas: {
        searchValue: '',
        nowLat: 0,
        nowLng: 0,
      }, //筛选参数
      showrefresh: false,
    }
  },
  watch: {
    swiperCurrent: function (newvalue, oldvalue) {
      this.dataList = []
      this.status = 'loadmore'
      this.filterParmas = {
        ...this.filterParmas,
        searchValue: '',
      }
      this.getDataList()
    },
  },
  onLoad() {
    utils
      .getLocationInfo()
      .then((res) => {
        this.filterParmas.nowLat = res.latitude
        this.filterParmas.nowLng = res.longitude
        this.getDataList()
      })
      .catch((err) => {
        this.getDataList()
      })
  },
  methods: {
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.status === 'loadmore') this.getDataList()
    },

    getDataList() {
      if (this.status !== 'loading') {
        this.status = 'loading'
        if (this.swiperCurrent === 0) {
          mine
            .queryMyPosts(this.filterParmas)
            .then((res) => {
              if (res.code === 200) {
                this.dataList.push(...res.data)
                // if (res.data?.length < this.$config.pageSize)
                this.status = 'nomore'
                // else {
                // 	this.status = "loadmore";
                // }
                this.showrefresh = false
              } else {
                throw Error()
              }
            })
            .catch((err) => {
              this.status = 'nomore'
              this.showrefresh = false
              console.log(err)
            })
        } else {
          mine
            .queryMyApply(this.filterParmas)
            .then((res) => {
              if (res.code === 200) {
                this.dataList.push(...res.data)
                // if (res.data?.length < this.$config.pageSize)
                this.status = 'nomore'
                // else {
                // 	this.status = "loadmore";
                // }
                this.showrefresh = false
              } else {
                throw new Error()
              }
            })
            .catch((err) => {
              this.status = 'nomore'
              this.showrefresh = false
              console.log(err)
            })
        }
      }
    },
    // getToDetail(item) {
    // 	console.log(item);
    // 	uni.navigateTo({
    // 		url: "/pages/index/pet-checked/checked-detail/checked-detail?id=" +
    // 			item.id,
    // 	});
    // },
    handleSearch(val) {
      this.filterParmas.searchValue = val
      this.dataList = []
      this.getDataList()
    },
    handlerefresh() {
      this.showrefresh = true
      this.dataList = []
      this.getDataList()
    },
    handleDel(type, id) {
      try {
        let promise
        if (type == 1) {
          promise = petBasi.delPetPlanById(id)
        } else if (type == 2) {
          promise = petBasi.delVehiclesById(id)
        } else if (type == 3) {
          promise = petBasi.delDriverPlanById(id)
        } else if (type == 4) {
          promise = delSlipById(id)
        } else if (type == 5) {
          promise = delDemandById(id)
        } else if (type == 6) {
          promise = delAdoptById(id)
        } else if (type == 7) {
          promise = deldoctorById(id)
        } else if (type == 8) {
          promise = delboardingHomeById(id)
        } else if (type == 9) {
          promise = delpairById(id)
        } else if (type == 10) {
          promise = delbeauticianById(id)
        } else if (type == 11) {
          promise = petChecked.delPetCompanyById(id)
        } else if (type == 12) {
          promise = petSchool.delPetTeacherById(id)
        } else if (type == 13) {
          promise = reportLoss.delPetDetectiveById(id)
        } else if (type == 14) {
          promise = reportLoss.delPetLossOfferById(id)
        } else if (type == 15) {
          promise = reportLoss.delPetReportLossById(id)
        } else if (type == 16) {
          promise = petBaomu.delPetBaomuById(id)
        } else if (type == 17) {
          promise = petParty.delPetPartyById(id)
        } else if (type == 18) {
          promise = petFuneral.delPetFuneralById(id)
        }

        if (promise) {
          promise
            .then((res) => {
              if (res.code == 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'none',
                })
                this.dataList = []
                this.getDataList()
              } else {
                throw new Error()
              }
            })
            .catch((error) => {
              uni.showToast({
                title: '删除失败',
                icon: 'none',
              })
            })
        }
      } catch (e) {
        uni.showToast({
          title: '删除失败',
          icon: 'none',
        })
      }
    },
  },
  components: {
    customInput,
    checkedCard,
    carCard,
    planCard,
    driverPlanCard,
    partyCard,
    detectiveCard,
    bountyOfferedCard,
    bagLossCard,
    teacherCard,
    baomuCard,
    bzsCard,
    status,
    cardType,
    blsCard,
    blxqCard,
    lyCard,
    doctorCard,
    jyCard,
    pdCard,
    mrCard,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  display: flex;
  flex-direction: column;

  .search-box {
    padding: 16rpx 32rpx 24rpx 32rpx;
  }

  .swiper-box {
    flex: 1;

    .swiper-item {
      padding: 0 32rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;

      .cards {
        margin-bottom: 32rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
        overflow: hidden;
        padding: 24rpx;

        .status {
          background: #f6f6f6;
          border-radius: 8rpx;
          padding: 10rpx 34rpx;
          font-weight: bold;
          font-size: 24rpx;
          color: #000000;
          line-height: 36rpx;
        }

        .btn-group {
          .tag {
            height: 46rpx;
            background: rgba(252, 214, 16, 0.4);
            border-radius: 62rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #000000;
            line-height: 46rpx;
            padding: 0 16rpx;
            min-width: 128rpx;
            text-align: center;
          }

          .btns {
            .btn {
              height: 46rpx;
              border-radius: 62rpx 62rpx 62rpx 62rpx;
              border: 2rpx solid #d9d9d9;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000;
              line-height: 46rpx;
              padding: 0 16rpx;
              min-width: 128rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>